<template>
  <div>
    <el-result icon="success">
      <template #icon>
        <el-icon v-if="loading" class="is-loading" style="font-size: 64px; color: #f0f2f5">
          <Refresh />
        </el-icon>
        <el-icon v-else-if="iconInfo" style="font-size: 64px; color: #f56c6c">
          <CircleCloseFilled />
        </el-icon>
      </template>
      <template #title>
        <div style="color: #333333">
          <el-skeleton style="width: 240px" :loading="loading" animated>
            <template #template>
              <el-skeleton-item variant="text" style="width: 30%" />
            </template>
            <template #default> 授权回调 </template>
          </el-skeleton>
        </div>
      </template>
      <template #sub-title>
        <el-skeleton style="width: 240px" :loading="loading" animated>
          <template #template>
            <el-skeleton-item variant="text" />
          </template>
          <template #default>
            <div style="color: #606266" v-text="errorMessage"></div>
          </template>
        </el-skeleton>
      </template>
      <template #extra v-if="closeWindow">
        <el-button type="info" @click="onCloseWindow" :disabled="loading"><span v-text="loading ? '请求认证...' : '关闭'"></span></el-button>
      </template>
    </el-result>
  </div>
</template>
<script setup lang="ts">
import { Refresh, CircleCloseFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { o2Authorize } from '@/api/common'
import { onMounted, ref } from 'vue'
import { HttpAsk } from '@/plugins/util/axios'
const route = useRoute()

const errorMessage = ref('')
const closeWindow = ref(true)
const loading = ref(true)
const iconInfo = ref(false)
const o2AuthorizeDto = {
  platform: 'amazon',
  code: route.query.spapi_oauth_code,
  state: route.query.state,
  sellingId: route.query.selling_partner_id,
}
const authorizeCallback = () => {
  if (o2AuthorizeDto.code && o2AuthorizeDto.state) {
    o2Authorize(o2AuthorizeDto).then((res) => {
      if (res.code === HttpAsk.SUCCESS) {
        loading.value = false
        iconInfo.value = false
        errorMessage.value = '授权成功！点击关闭'
      } else {
        loading.value = false
        iconInfo.value = true
        errorMessage.value = res.message
      }
    })
  } else {
    loading.value = false
    iconInfo.value = true
    errorMessage.value = '此地址为第三方授权回调地址，参数错误！点击关闭'
  }
}
const onCloseWindow = () => {
  window.close()
}
onMounted(() => {
  authorizeCallback()
})
</script>
<style scoped lang="scss"></style>
